<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>七月的夏天有点热</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
      varying float vIntensity;
      varying vec2 vUv;

      uniform float uThickness;
      void main() {
        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
        vec3 worldNormal = normalize(modelMatrix * vec4(normal, 0.0)).xyz;

        vec3 dirToCamera = normalize(cameraPosition - worldNormal.xyz);
        vIntensity = 1.0 - dot(worldNormal, dirToCamera);
        vIntensity = pow(vIntensity, uThickness);

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        vUv = uv;
      }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
      varying float vIntensity;
      varying vec2 vUv;

      uniform vec3 uColor;
      uniform sampler2D uNoiseTexture;
      uniform float uTime;
      void main(){
        vec2 nuv = vUv;
        nuv.y += uTime * 0.3;
        vec4 noiseColor = texture2D(uNoiseTexture,nuv);
        gl_FragColor = vec4(noiseColor.rgb * vIntensity * uColor * 5.0,1.0);
      }
    </script>
    <!-- <script src="https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js"></script>
    <script>
      const COLORS = {
        RED: '#FD5061',
        YELLOW: '#FFCEA5',
        BLACK: '#29363B',
        WHITE: 'white',
        VINOUS: '#A50710',
      }
      const burst1 = new mojs.Burst({
        zIndex: 99999,
        left: 0,
        top: 0,
        count: 8,
        radius: { 50: 150 },
        children: {
          shape: 'line',
          stroke: ['white', '#FFE217', '#FC46AD', '#D0D202', '#B8E986', '#D0D202'],
          scale: 1,
          scaleX: { 1: 0 },
          // pathScale:    'rand(.5, 1.25)',
          degreeShift: 'rand(-90, 90)',
          radius: 'rand(20, 40)',
          // duration:     200,
          delay: 'rand(0, 150)',
          isForce3d: true,
        },
      })
      const largeBurst = new mojs.Burst({
        zIndex: 99999,
        left: 0,
        top: 0,
        count: 4,
        radius: 0,
        angle: 45,
        radius: { 0: 200 },
        children: {
          shape: 'line',
          stroke: '#4ACAD9',
          scale: 1,
          scaleX: { 1: 0 },
          radius: 100,
          duration: 450,
          isForce3d: true,
          easing: 'cubic.inout',
        },
      })
      const CIRCLE_OPTS = {
        left: 0,
        top: 0,
        scale: { 0: 1 },
      }
      const largeCircle = new mojs.Shape({
        zIndex: 99999,
        ...CIRCLE_OPTS,
        fill: 'none',
        stroke: 'white',
        strokeWidth: 4,
        opacity: { 0.25: 0 },
        radius: 150,
        duration: 300,
      })
      const smallCircle = new mojs.Shape({
        zIndex: 99999,
        ...CIRCLE_OPTS,
        fill: 'white',
        opacity: { 0.5: 0 },
        radius: 25,
      })
      document.addEventListener('mouseup', function (e) {
        burst1.tune({ x: e.pageX, y: e.pageY }).generate().replay()
        largeBurst.tune({ x: e.pageX, y: e.pageY }).replay()
        largeCircle.tune({ x: e.pageX, y: e.pageY }).replay()
        smallCircle.tune({ x: e.pageX, y: e.pageY }).replay()
      })
    </script> -->
  </body>
</html>
